<template>
  <div class="search-container">
    <van-nav-bar>
      <i slot="left" @click="$router.back()"><van-icon name="arrow-left" /></i>
      <span slot="left" class="text">找家政服务</span>
    </van-nav-bar>
    <div class="content">
      <van-cell>
        <span class="left"></span>
        <span class="right">找家政</span>
      </van-cell>
      <van-cell>
        <div slot="title">*需求岗位</div>
        <div slot="title">
          <van-tag
            plain
            type="primary"
            round
            v-for="(item, index) in profession"
            :key="index"
            @click="checkActive(index)"
            :class="isActive == index && isActive !== false ? 'active' : ''"
            >{{ item }}</van-tag
          >
        </div>
      </van-cell>
      <van-form>
        <van-field
          clearable
          v-model="query.mobile"
          name="mobile"
          label="*手机号码 :"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="query.age"
          label="年龄："
          @click="agePicker = true"
        >
          <template #button>
            <van-icon name="arrow-down" @click="agePicker = true" />
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="query.money"
          label="薪资："
          @click="moneyPicker = true"
        >
          <template #button>
            <van-icon name="arrow-down" @click="moneyPicker = true" />
          </template>
        </van-field>
        <van-field
          v-model="query.accommodation"
          name="accommodation"
          label="住家 :"
          clearable
        >
          <template #button>
            <van-tag plain type="primary" round @click="handle($event)"
              >不住</van-tag
            >
            <van-tag plain type="primary" round @click="handle($event)"
              >住家</van-tag
            >
          </template>
        </van-field>
        <van-field
          v-model="query.contact"
          name="contact"
          label="联系人 :"
          clearable
        />
        <van-field
          v-model="query.place"
          name="place"
          label="籍贯要求 :"
          clearable
        />
        <van-field
          v-model="query.work"
          name="work"
          label="工作地点 :"
          clearable
        />
      </van-form>
    </div>
    <van-button type="primary" block @click="commit">提交资料</van-button>
    <!-- 年龄选择 -->
    <van-popup v-model="agePicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="ages"
        @confirm="changeAge"
        @cancel="agePicker = false"
      />
    </van-popup>
    <!-- 薪资选择 -->
    <van-popup v-model="moneyPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="moneys"
        @confirm="changeMoney"
        @cancel="moneyPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'searchHousehold',
  data () {
    return {
      query: {
        mobile: '',
        age: '',
        money: '',
        accommodation: '',
        contact: '',
        place: '',
        work: ''
      },
      profession: ['月嫂', '育婴师', '保洁/清', '保姆', '早教/拖', '养老/陪', '家装/搬', '产康师'],
      isActive: false,
      ages: ['20 ~ 30 岁', '30 ~ 40 岁', '40 ~ 50 岁'],
      agePicker: false,
      moneyPicker: false,
      moneys: ['3000元', '3500元', '4000元', '4500元', '5000元']
    }
  },
  methods: {
    handle (e) {
      this.query.accommodation = e.target.innerHTML
    },
    checkActive (index) {
      // console.log(index)

      this.isActive = index
    },
    changeAge (value) {
      this.query.age = value
      this.agePicker = false
    },
    changeMoney (value) {
      this.query.money = value
      this.moneyPicker = false
    },
    commit () {
      if (this.query.mobile.trim().length < 11 || this.isActive === false) {
        this.$toast('请填写必要信息')
        return
      }
      this.$toast.success('提交成功')
      this.$toast.setDefaultOptions({ duration: 1000 })
      this.$router.push('/')
    }
  }
}
</script>

<style lang="less" scoped>
.search-container {
  min-height: 1332px;
  background-color: #f0eeee;
  /deep/.van-nav-bar__content {
    background-color: #3f51b5;
    height: 200px;
    i.van-icon {
      width: 18px;
      height: 18px;
      margin-left: 10px;
      margin-top: 12px;
      font-size: 40px;
      color: #fff;
    }
    span.text {
      margin-left: 27px;
      font-size: 32px;
      font-weight: 700;
      color: #fff;
    }
    .van-cell {
      color: #323233;
      font-size: 0.37333rem;
      line-height: 0.64rem;
      font-weight: 700;
    }
  }
  div.content {
    position: absolute;
    top: 150px;
    left: 23px;
    width: 704px;
    // height: 1052px;
    z-index: 1;
    background-color: #fff;
    padding: 0px 15px;
    box-sizing: border-box;
    border-radius: 10px;
    .van-cell__value--alone {
      .left {
        display: inline-block;
        width: 8px;
        height: 28px;
        margin-right: 20px;
        background-color: #3f51b5;
      }
      .right {
        font-weight: 700;
        font-size: 32px;
      }
    }
    .van-cell {
      font-weight: 600;
      .van-tag--primary.van-tag--plain {
        color: #979191;
        font-weight: normal !important;
        margin-right: 30px;
        padding: 5px 15px;
        margin-top: 18px;
        margin-bottom: 15px;
      }
    }
    .van-field {
      margin-bottom: 10px;
      font-weight: 700;
      color: #000;
    }
    .title {
      margin-bottom: 15px;
    }
    .active {
      color: #3f51b5 !important;
    }
  }
  .van-button {
    position: absolute;
    bottom: 0;
    background-color: #3f51b5;
    outline: 0 none;
    border: 0;
  }
}
</style>
